<template>
  <div class="app-container">
    <!-- 辅导员离校管理 -->
    <div class="title-tips" v-if="timeHorizon.startTime && timeHorizon.endTime">
      温馨提示：毕业离校时间为{{ timeHorizon.startTime }}-{{
        timeHorizon.endTime
      }}，请在该时间内进行离校操作
    </div>
    <div class="search-form-box">
      <el-form ref="formRef" :inline="true">
        <el-form-item label="毕业年份">
          <el-select
            v-model="gradYear"
            placeholder="请选择毕业年份"
            @change="statisticsChange"
          >
            <el-option
              v-for="item in yearData"
              :key="item.GRAD_YEAR"
              :label="item.GRAD_YEAR"
              :value="item.DGS_ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="chart-title">
      <div class="eachars-letf">
        <pieChart
          style="width: 60%; height: 50%"
          :list="statusMapList"
          v-if="statusMapList && flag"
        ></pieChart>
        <div class="pie-left">
          <p>毕业离校学生：{{ statusMap.NOGDPNUMBER }}人</p>
          <p>学生已确认：{{ statusMap.GDPNUMBER }}人</p>
          <p>学生确认进度：{{ statusMap.gdpPercentage }}%</p>
        </div>
        <span class="join" @click="handleDetails">查看详情</span>
      </div>
      <div class="eachars-rigth">
        <pieChart
          style="width: 59%; height: 50%"
          :list="bankInforList"
          v-if="bankInforList && backFlag"
        ></pieChart>
        <div class="pie-rigth">
          <p>提供银行卡号：{{ bankInfor.BANKNUMBER }}人</p>
          <p>未提供银行卡号：{{ bankInfor.NOBANKNUMBER }}人</p>
          <p>银行卡号进度：{{ bankInfor.bankPercentage }}%</p>
        </div>
        <div class="text-rigth">
          存在异常银行卡号：{{ bankInfor.ERRORBANKNUMBER }}人
        </div>
        <span class="join-rigth" @click="handleDetails">查看详情</span>
      </div>
    </div>
    <h4>负责班级的离校人数统计</h4>
    <div class="Statistics" v-if="statClassNumList.length > 0">
      <div class="content" v-for="(v, i) in statClassNumList" :key="i">
        <p>{{ v.NAME }}</p>
        <p>{{ v.VAL }}人</p>
      </div>
    </div>
    <div class="Statistics" v-if="statClassNumList.length == 0">
      <!-- <div class="content" v-for="(v, i) in statClassNumList" :key="i">
        <p>{{ v.NAME }}</p>
        <p>{{ v.VAL }}人</p>
      </div> -->
      <div class="content">暂无所带的班级</div>
    </div>
    <h4>离校情况分析</h4>
    <div class="analyze">
      <div
        class="analyze-content"
        v-for="item in overDataList"
        :key="item.index"
      >
        <p>{{ item.LABEL }}</p>
        <p>{{ item.value }}</p>
        <p style="cursor: pointer" @click="handleView(item)">
          {{ item.RSNUMBER }}人
        </p>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body>
      <el-form :model="classParams" size="small" :inline="true">
        <el-form-item label="注册号">
          <el-input
            v-model.trim="classParams.regCode"
            placeholder="请输入注册号"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-table :data="classListInfor">
        <el-table-column
          label="学院专业班级"
          align="center"
          show-overflow-tooltip
          prop="dsc"
        >
        </el-table-column>
        <el-table-column
          label="注册号"
          align="center"
          prop="regCode"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="学生姓名"
          align="center"
          prop="studentName"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="宿舍"
          align="center"
          prop="dormName"
          show-overflow-tooltip
          v-if="dataView.LABEL == '宿管'"
        >
        </el-table-column>
        <el-table-column
          label="学位"
          align="center"
          prop="edLevel"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="未还书本"
          align="center"
          show-overflow-tooltip
          prop="tssl"
          v-if="dataView.LABEL == '图书馆'"
        >
        </el-table-column>
        <el-table-column
          label="未还书名"
          align="center"
          show-overflow-tooltip
          prop="bookNames"
          width="180"
          v-if="dataView.LABEL == '图书馆'"
        >
        </el-table-column>
        <el-table-column
          label="赔偿金"
          align="center"
          show-overflow-tooltip
          prop="gradRfDetails.compAmount"
          width="180"
          v-if="dataView.LABEL == '宿管'"
        >
        </el-table-column>

        <el-table-column
          label="赔偿金"
          align="center"
          show-overflow-tooltip
          prop="compAmount"
          width="180"
          v-if="dataView.LABEL == '图书馆'"
        >
        </el-table-column>
        <el-table-column
          label="备注"
          align="center"
          width="180"
          v-if="dataView.LABEL == '宿管'"
        >
          <template slot-scope="scope">
            {{ formatRemark(scope.row) }}
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="classTotal > 0"
        :total="classTotal"
        :page.sync="classParams.pageNum"
        :limit.sync="classParams.pageSize"
        @pagination="handleView(dataView)"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  clrGradStuRoster,
  clrGradStuRosterList,
  statClassNum,
  clrGradStuRosterStat,
} from "@/api/departure/instructor";
import { dormGradStuRosterList } from "@/api/departure/housemaster";
import { bookGradStuRosterList } from "@/api/departure/librarys";
import { dpa } from "@/api/departure/overviewDate";
import {
  getGradYearSelector,
  getSettlementTime,
} from "@/api/departure/gradsettings";
import searchForm from "@/components/Search/searchForm.vue";
import pieChart from "@/views/components/pieChart/index";
export default {
  name: "instructor",
  dicts: ["dep_grad_status"],
  components: { searchForm, pieChart },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      gradYear: "",
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      classTotal: "",
      classListInfor: [],
      classParams: {
        pageNum: 1,
        pageSize: 10,
        dgsId: null,
        isCompStatus: "",
        regCode: "",
        barStatus: "",
      },
      timeHorizon: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dgsId: null,
        gdpStatus: null,
      },
      statClassNumList: [],
      // 表单参数
      statusMap: {},
      statusMapList: [
        { value: "", name: "毕业离校学生" },
        { value: "", name: "学生已确认" },
      ],
      bankInforList: [
        { value: "", name: "提供银行卡号" },
        { value: "", name: "未提供银行卡号" },
      ],
      flag: false,
      backFlag: false,
      bankInfor: {},
      dgsIdDate: "",
      yearData: [],
      overDataList: [],
      timeForm: {},
      dgsId: "",
      dataView: {},
    };
  },
  created() {
    // this.getList();
    getGradYearSelector().then((res) => {
      this.yearData = res.data;
      this.gradYear = res.data[0].GRAD_YEAR;
      this.dgsId = res.data[0].DGS_ID;

      console.log(this.gradYear, "res.data");
      this.statistics();
      this.getTitme(this.dgsId);
    });

    // listGradsettings().then(res => {
    //   console.log(res, 'res')
    //   this.timeForm = res.rows[0]
    //   if(this.timeForm.gdpStartTime && this.timeForm.gdpEndTime) {
    //     this.timeForm.gdpStartTime = new Date(this.timeForm.gdpStartTime).toLocaleDateString('zh-CN', {year: 'numeric', month: '2-digit', day: '2-digit'}).replace(/\//g, '年').replace(',', '日');;
    //   this.timeForm.gdpEndTime = new Date(this.timeForm.gdpEndTime).toLocaleDateString('zh-CN', {year: 'numeric', month: '2-digit', day: '2-digit'}).replace(/\//g, '年').replace(',', '日');;
    //   }

    // })
  },
  methods: {
    getTitme(data) {
      if (data) {
        getSettlementTime(data).then((res) => {
          console.log(res, "时间");
          if (res.code == 200) {
            this.timeHorizon = res.data;
          }
        });
      }
    },
    handleDetails() {
      this.$router.push({ path: "/departure/instructor/details" });
    },
    formatRemark(row) {
      if (
        !row.gradRfDetails ||
        row.gradRfDetails.remark === null ||
        row.gradRfDetails.remark === ""
      ) {
        return "无";
      }
      return row.gradRfDetails.remark;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.classParams.pageNum = 1;
      this.classParams.dgsId = this.dgsId;
      if (this.dataView.LABEL == "宿管") {
        this.classParams.isCompStatus = "Y";
        this.title = "查看宿舍赔偿人数";
        dormGradStuRosterList(this.classParams).then((response) => {
          this.classTotal = response.total;
          this.classListInfor = response.rows;
          this.dataView = data;
          console.log(data.LABEL, this.dataView, "data");
        });
      } else if (this.dataView.LABEL == "图书馆") {
        bookGradStuRosterList(this.classParams).then((response) => {
          this.classTotal = response.total;
          this.classListInfor = response.rows;
          this.dataView = data;
          console.log(data.LABEL, this.dataView, "data");
        });
      }
      // this.handleView(this.dataView);
    },
    resetQuery() {
      this.classParams.pageNum = 1;
      this.classParams.dgsId = this.dgsId;
      this.classParams.regCode = "";

      this.handleView(this.dataView);
    },
    handleView(data) {
      this.classListInfor = [];
      this.dataView = {};
      this.classParams.dgsId = this.dgsId;
      this.classParams.regCode = "";

      if (data.LABEL == "宿管") {
        this.classParams.isCompStatus = "Y";
        this.title = "查看宿舍赔偿人数";
        dormGradStuRosterList(this.classParams).then((response) => {
          this.classTotal = response.total;
          this.classListInfor = response.rows;
          this.dataView = data;
          console.log(data.LABEL, this.dataView, "data");
        });
        this.open = true;
      } else if (data.LABEL == "图书馆") {
        this.open = true;
        this.classParams.barStatus = "N";
        this.title = "查看图书赔偿人数";
        bookGradStuRosterList(this.classParams).then((response) => {
          this.classTotal = response.total;
          this.classListInfor = response.rows;
          this.dataView = data;
          console.log(data.LABEL, this.dataView, "data");
        });
      }
    },
    statisticsChange(e) {
      // 找到选中值对应的选项
      const selectedOption = this.yearData.find(
        (option) => option.DGS_ID === e
      );
      this.gradYear = selectedOption ? selectedOption.GRAD_YEAR : "";
      this.statistics();
      this.getTitme(e);
    },
    async statistics() {
      this.flag = false;
      this.backFlag = false;
      await statClassNum({ gradYear: this.gradYear }).then((res) => {
        this.statClassNumList = res.data;
      });
      await clrGradStuRosterStat({ gradYear: this.gradYear }).then((res) => {
        this.statusMap = res.statGdpStatusMap;
        this.bankInfor = res.statBankInfoMap;
        this.statusMapList[0].value = res.statGdpStatusMap.NOGDPNUMBER;
        this.statusMapList[1].value = res.statGdpStatusMap.GDPNUMBER;
        this.bankInforList[0].value = res.statBankInfoMap.BANKNUMBER;
        this.bankInforList[1].value = res.statBankInfoMap.NOBANKNUMBER;
        this.flag = true;
        this.backFlag = true;
      });
      this.yearData.forEach((e) => {
        if (e.GRAD_YEAR == this.gradYear) {
          this.dgsIdDate = e.DGS_ID;
        }
      });
      dpa(this.dgsIdDate).then((res) => {
        console.log(res, "离校情况分析");
        this.overDataList = res.data.map((item) => {
          return {
            ...item,
            value: "",
          };
        });
        this.overDataList.forEach((item) => {
          if (item.LABEL == "辅导员") {
            item.value = "涉及退费学生";
          } else if (item.LABEL == "图书馆") {
            item.value = "借书未还学生";
          } else if (item.LABEL == "宿管") {
            item.value = "涉及赔偿金学生";
          } else if (item.LABEL == "饭卡") {
            item.value = "涉及饭卡退费学生";
          } else if (item.LABEL == "水电费") {
            item.value = "涉及电费退费学生";
          } else if (item.LABEL == "书费") {
            item.value = "完成离校学生";
          } else if (item.LABEL == "财务部") {
            item.value = "完成离校学生";
          }
        });
      });
    },
  },
};
</script>
<style scoped>
.title-tips {
  text-align: center;
  border: 1px solid #d0d0d0;
  padding: 5px;
  margin-bottom: 5px;
}
.chart-title {
  display: flex;
  justify-content: space-between;
  height: 200px;
}
.join {
  position: absolute;
  right: 3%;
  top: 90%;
  color: #4095e5;
  cursor: pointer;
}

.eachars-letf {
  display: flex;
  position: relative;
  justify-content: space-between;
  width: 35%;
  border: 1px solid #d0d0d0;
}
h4 {
  font-weight: bold;
}
.join-rigth {
  position: absolute;
  right: 2%;
  top: 90%;
  color: #4095e5;
  cursor: pointer;
}
.eachars-rigth {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 63%;
  border: 1px solid #d0d0d0;
}
.pie-left {
  margin-top: 8%;
  margin-right: 8%;
  line-height: 20px;
}
.pie-rigth {
  width: 50%;
  margin-top: 5%;
  margin-right: 8%;
  line-height: 20px;
}
.text-rigth {
  width: 33%;
  background-color: #93d2f3;
  height: 100px;
  text-align: center;
  line-height: 100px;
  margin: 5%;
}
.Statistics {
  display: flex;
  justify-content: space-between;
  border: 1px solid #d0d0d0;
  width: 100%;
  flex-wrap: wrap;
}
.content {
  width: 24%;
  display: flex;
  justify-content: space-between;
  padding: 0 5% 0 10px;
}
.analyze {
  display: flex;
  justify-content: space-between;

  width: 100%;
}
.analyze-content {
  width: 16%;
  border: 1px solid #d0d0d0;
  text-align: center;
}
</style>